<template>
	<div class="vue_app activateGiftCard" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'激活礼品卡'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
			<div class="activatecard">
				<span>礼品卡号：</span>
				<input type="text" v-model="giftcardEntityCode" placeholder="请输入礼品卡号" :disabled="disab" style="background-color: #fff;" />
			</div>
			<div class="activatecard">
				<span>激活码：</span>
				<input type="text" v-model="activationCode" placeholder="请输入礼品卡激活码" :disabled="disab" style="background-color: #fff;" />
			</div>
		</div>
		<div class="cardoperation1">
			<p @click="payfone">立即激活</p>
		</div>
		<gift-card-popout ref="popoutCover" text="激活" :title="walletStatus" :contant="carddetil" :timedata="timedata" :time="time" :clickEventsure="clickEventsure" :clickEventtitle="clickEventtitle">
		</gift-card-popout>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import GiftCardPopout from "../../real-components/GiftCardPopout";
	import { mapGetters } from "vuex";
	import { MessageBox } from '@/ui-components';
	import { Toast } from '@/utils/toast';
	export default {
		data() {
			return {
				//弹框数据
				timedata: null,
				time: '',
				carddetil: [{
					name: "面额：￥",
					money: ""
				}, {
					name: "余额：￥",
					money: ""
				}],
				//路由卡的名字(卡号)
				giftcardEntityCode: "",
				//激活码
				activationCode: "",
				//是否设置钱包密码
				walletStatus: "",
				disab: false,
				//防止重复点击
				flag: true
			}
		},
		components: {
			"my-header": MyHeader,
			"gift-card-popout": GiftCardPopout
		},
		methods: {
			//弹出弹框（激活礼品卡）
			payfone() {
				/*//判断是否在app内
				if(!this.isXiangpu){
					location.href = location.href.split('H5')[0] + 'download/index.html';
                    console.log(location.href.split('H5')[0] + 'download/index.html');
                    return 
				}*/
				//卡号密码校验
				if((/\s+/g.test(this.giftcardEntityCode))) {
					this.giftcardEntityCode = this.giftcardEntityCode.replace(/\s|\xA0/g, "")
				}
				if((/\s+/g.test(this.activationCode))) {
					this.activationCode = this.activationCode.replace(/\s|\xA0/g, "")
				}
				if(!(/[0-9a-zA-Z]{8}/.test(this.giftcardEntityCode))) {
					Toast({
						message: '礼品卡卡号应为8位的数字或字母组成',
						duration: 2000,
						type: 'fail'
					});
					return
				} else if(!(/[0-9a-zA-Z]{4}/.test(this.activationCode)) && !this.disab) {
					Toast({
						message: '激活码应为4位或4位以上的数字或字母组成',
						duration: 2000,
						type: 'fail'
					});
					return
				}
				let dataprame = {}
				if(this.disab) {
					dataprame = {
						'giftcardEntityCode': this.giftcardEntityCode,
						'activationCode': this.$route.params.activationCode,
					}
				} else {
					dataprame = {
						'giftcardEntityCode': this.giftcardEntityCode,
						'activationCode': this.activationCode,
					}
				}
				let sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardSalesAPI/activationGiftCardEntity',
					method: 'POST',
					headers: {
						'sessionId': sessionId,
					},
					data: dataprame
				};
                if(!this.flag) {
					return
				}
				this.flag = false
				axios(config).then((res) => {
					this.flag = true
					if(res.data.returnCode == 1) {
						this.carddetil[0].money = res.data.data[0].denomination
						this.carddetil[1].money = res.data.data[0].balance
						this.timedata = Number(res.data.data[0].validityDate)
						this.time = res.data.data[0].deadline
						this.$refs.popoutCover.showCover();
					} else {
						MessageBox(res.data.msg, '请先确认卡号和激活码吧').then(() => {})
					}
				})

			},
			//确认按钮
			clickEventsure() {
				this.$refs.popoutCover.hideCover()
				this.$router.go(-1)
			},
			//去购物或者设置密码按钮
			clickEventtitle() {
				if(this.walletStatus == 1) {
					this.$router.push({
						path: 'home'
					})
				} else if(this.walletStatus == 0) {
					this.$router.push({
						path: 'SetKeyWallet'
					})
				}
			},
			//获取路由上面的卡的信息
			getcardid() {
				this.giftcardEntityCode = (this.$route.params.giftcardEntityCode || this.$route.query.giftcardEntityCode)
				if(this.giftcardEntityCode && this.$route.params.activationCode) {
					this.disab = true
					this.activationCode = '****'
				}
			},
			//判断用户是否开通钱包密码
			walletPassword() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/customer/getCustomer',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					this.walletStatus = res.data.data[0].walletStatus
				})
			},
		},
		computed: {
			...mapGetters('wxh', [
				'userInfo'
			]),
			/*//判断是否在app内还是在网页内
			isXiangpu(){
				var u = navigator.userAgent;
                return u.indexOf("xiangpu") > -1; 
			},*/
		},
		watch: {

		},
		mounted() {
			var sessionId = localStorage.getItem('sessionId');
			if(!sessionId || sessionId == 'undefined') {
				this.$router.push({
					path: 'login',
					query: {
						page: 'ActivateGiftCard'
					}
				})
				return
			}
			this.getcardid();
			this.walletPassword()
		},
	}
</script>

<style>
	/*激活礼品卡的输入框*/
	
	.activatecard {
		background-color: #fff;
		border-bottom: 1px solid #eaeaea;
	}
	
	.activatecard span {
		display: inline-block;
		text-align: left;
		width: 5rem;
	}
	
	.activatecard input {
		display: inline-block;
		width: 60%;
		padding: 0.1rem 0.3rem;
		border-radius: 0.5rem;
	}
	/*卡的操作（激活按钮）*/
	
	.activateGiftCard .cardoperation1 {
		position: absolute;
		top: 12rem;
		width: 100%;
		height: 2.5rem;
	}
	
	.activateGiftCard .cardoperation1 p {
		display: inline-block;
		background-color: #EF5423;
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 1rem;
		color: #fff;
		border-radius: 0px;
	}
</style>